<template>
  <view>
    <!-- Sidebar -->
    <view class="sidebar" :class="{ open: isOpen }">
      <view class="sidebar-header">
        <text class="sidebar-title">任务分类</text>
        <view class="close-icon" @click="closeSidebar">
          <text>×</text>
        </view>
      </view>
      <view class="sidebar-content">
        <!-- 分类列表容器 -->
        <view class="category-container">
          <view 
            v-for="(item, index) in menuItems" 
            :key="index"
            class="sidebar-item" 
            :class="{ active: activeCategory === item.id }"
            @click="selectCategory(item)"
          >
            <view class="sidebar-item-content">
              <!-- 添加图标显示 -->
              <view class="item-icon" v-if="item.icon">
                <image :src="getIconPath(item.icon)" mode="aspectFit"></image>
              </view>
              <text>{{ item.text }}</text>
            </view>
          </view>
        </view>
        
        <!-- 分隔线 -->
        <view class="divider"></view>
        
        <!-- 编辑功能区域 -->
        <view class="edit-section">
          <view class="edit-button" @click="goToEditPage">
            <text class="edit-icon">⚙️</text>
            <text class="edit-text">编辑分类</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Overlay -->
    <view 
      class="sidebar-overlay" 
      v-if="isOpen"
      @click="closeSidebar"
    ></view>
  </view>
</template>

<script>
import { getIconPath } from '@/utils/iconUtils';

/**
 * 侧边栏组件
 * 用于显示分类列表，支持选择、编辑、删除等操作
 */
export default {
  name: "TheSidebar",
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    activeCategory: {
      type: String,
      default: ""
    },
    menuItems: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    closeSidebar() {
      this.$emit("update:isOpen", false);
    },
    selectCategory(category) {
      this.$emit("select-category", category);
    },
    deleteCategory(category) {
      this.$emit("delete-category", category);
    },
    addCategory() {
      this.$emit("add-category");
    },
    goToEditPage() {
      // 关闭侧边栏
      this.closeSidebar();
      // 触发导航到编辑页面的事件
      this.$emit("navigate-to-edit");
    },
    // 获取图标完整路径
    getIconPath(iconName) {
      return getIconPath(iconName);
    }
  }
}
</script>

<style scoped>
/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100vh;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar.open {
  left: 0;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.sidebar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.close-icon {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon text {
  font-size: 48rpx;
  color: #999;
}

.sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 120rpx); /* 减去header高度 */
}

/* 分类列表容器 */
.category-container {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 0;
}

.sidebar-item {
  padding: 30rpx 50rpx;
  font-size: 32rpx;
  color: #666;
  position: relative;
}

.sidebar-item.active {
  color: #4e6ef2;
  background-color: #f6f8ff;
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 40rpx;
  background-color: #4e6ef2;
  border-radius: 0 4rpx 4rpx 0;
}

/* 添加图标样式 */
.sidebar-item-content {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-icon image {
  width: 100%;
  height: 100%;
}

/* 分隔线 */
.divider {
  height: 2rpx;
  background-color: #f0f0f0;
  margin: 0;
}

/* 编辑区域 */
.edit-section {
  padding: 30rpx 50rpx;
  background-color: #fff;
  margin-bottom: 50rpx; /* 底部固定间距 */
}

.edit-button {
  display: flex;
  align-items: center;
  color: #4e6ef2;
  font-size: 32rpx;
}

.edit-icon {
  margin-right: 15rpx;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style> 